<template>
  <a-card :title="$t('m.bpm.design.select_user_selected')" size="small" style="margin-left: 10px;">
    <ych-icon slot="extra" type="delete" @click="removeAll"/>
    <a-list :dataSource="value" size="small" bordered>
      <a-list-item slot="renderItem" slot-scope="item, index">
        <span>
          <span style="margin-right: 5px;">{{index+1}}</span>
          {{orgTreeShowDeptAbbr && item.orgNameAbbr?item.orgNameAbbr:item.orgName}}
        </span>
        <ych-icon slot="actions" @click="remove(item)" type="delete"/>
      </a-list-item>
    </a-list>
  </a-card>
</template>

<script>

  export default {
    name: 'YchSelectedDepartArea',
    props: {
      value: {
        type: Array,
        required: true
      },
      orgTreeShowDeptAbbr:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {}
    },
    methods: {
      removeAll() {
        this.$emit('input', [])
      },
      remove(removeItem) {
        const data = this.value.filter(item => item.id != removeItem.id)
        this.$emit('input', data)
      }
    }
  }
</script>
